<div class="content">
    <div id="example_title">
        <h1>Two Grids</h1>
        Below is a quick example how to work with multiple grids. The example demonstrates how to catch events from one grid and move a record
        from one grid to another.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="position: relative; height: 300px;">
    <div id="grid1" style="display: inline-block; width: 500px; height: 300px;"></div>
    <div id="grid2" style="display: inline-block; width: 500px; height: 300px;"></div>
</div>

<!--CODE-->
<script type="module">
import { w2grid, w2utils } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid1',
    box: '#grid1',
    header: 'Available',
    show: { header: true },
    columns: [
        { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ],
    onClick(event) {
        // need timer for nicer visual effect that record was selected
        setTimeout(() => {
            grid2.add(w2utils.extend({}, grid.get(event.detail.recid), { selected : false }) )
            grid.selectNone()
            grid.remove(event.detail.recid)
        }, 150)
    }
})

let grid2 = new w2grid({
    name: 'grid2',
    box: '#grid2',
    header: 'Selected',
    show: { header: true },
    columns: [
        { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    onClick(event) {
        // need timer for nicer visual effect that record was selected
        setTimeout(() => {
            grid.add(w2utils.extend({}, grid2.get(event.detail.recid), { selected : false }))
            grid2.selectNone()
            grid2.remove(event.detail.recid)
        }, 150)
    }
})
</script>
